import React, { useState } from "react";
import "./style/index.scss";
import {
  daysOfMonth,
  firstDayOfMonth,
  handleChangeMonthForLastDay,
  lastDayOfMonth,
} from "./utils";
import { CalendarProps } from "./model";
const Calendar = (props: CalendarProps) => {
  const { defaultValue = new Date(), onChange } = props;
  const monthName = [
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
  ];
  const [date, setDate] = useState(defaultValue);
  const handlePrevMonth = () => {
    const day = handleChangeMonthForLastDay(date, "prev");
    setDate(new Date(date.getFullYear(), date.getMonth() - 1, day));
  };
  const handleNextMonth = () => {
    const day = handleChangeMonthForLastDay(date, "next");
    setDate(new Date(date.getFullYear(), date.getMonth() + 1, day));
  };

  const renderDates = () => {
    const days = [];
    // 获取当月有多少天
    const daysCount = daysOfMonth(date.getFullYear(), date.getMonth());
    // 获取当月第一天是周几
    const firstDay = firstDayOfMonth(date.getFullYear(), date.getMonth());
    // 获取当月最后一天是周几
    const lastDay = lastDayOfMonth(date.getFullYear(), date.getMonth());

    // 获取上月有多少天
    const daysPrevMonthCount = daysOfMonth(
      date.getFullYear(),
      date.getMonth() - 1
    );

    // for (let i = 0; i < firstDay; i++) {
    //   days.push(<div key={`empty-${i}`} className="empty"></div>);
    // }
    for (let i = daysPrevMonthCount; i > daysPrevMonthCount - firstDay; i--) {
      days.unshift(
        <div key={`lastMonth-${i}`} className="empty text-gray-200">
          {i}
        </div>
      );
    }

    console.log("days start", days);
    for (let i = 1; i <= daysCount; i++) {
      const clickHandler = () => {
        const curDate = new Date(date.getFullYear(), date.getMonth(), i);
        setDate(curDate);
        onChange?.(curDate);
      };
      if (i === date.getDate()) {
        days.push(
          <div
            key={i}
            className="day bg-slate-500 text-yellow-100 rounded-lg"
            onClick={clickHandler}
          >
            {i}
          </div>
        );
      } else {
        days.push(
          <div key={i} className="day" onClick={clickHandler}>
            {i}
          </div>
        );
      }
    }

    console.log("days middle", days);
    for (let i = 1; i < 7 - lastDay; i++) {
      days.push(
        <div
          key={`lastMonth-${days.length + i}`}
          className="empty text-gray-200"
        >
          {i}
        </div>
      );
    }

    console.log("days end", days);

    return days;
  };

  return (
    <div className="border-solid border border-gray-300 p-[10px] w-[300px] rounded-xl">
      <div className="flex justify-between items-center h-[40px]">
        <button
          className="pr-[5px] pl-[5px] border-2 border-gray-500 rounded-[5px]"
          onClick={handlePrevMonth}
        >
          &lt;
        </button>
        <div>
          {date.getFullYear()} 年 {monthName[date.getMonth()]} 月
        </div>
        <button
          className="pr-[5px] pl-[5px] border-2 border-gray-500 rounded-[5px]"
          onClick={handleNextMonth}
        >
          &gt;
        </button>
      </div>
      <div className="days flex flex-wrap">
        <div className="day">日</div>
        <div className="day">一</div>
        <div className="day">二</div>
        <div className="day">三</div>
        <div className="day">四</div>
        <div className="day">五</div>
        <div className="day">六</div>
        {renderDates()}
      </div>
    </div>
  );
};
export default Calendar;
